<template>
  <div id="charts-contents"></div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import "echarts-wordcloud";
import { onMounted } from "vue";
import { getProvinceData } from "../api/visualizationData";

const getRecruit = async () => {
  const res = await getProvinceData();
  console.log(res);
  if (res.code === 200) {
    // 静态数据
    const staticData = res.data[0].reqWordCloud.map(item => ({
      name: item.name,
      value: item.value
    }));

    const DrawWordCloud = () => {
      const mychart = echarts.init(document.getElementById("charts-contents"));
      mychart.setOption({
        series: [
          {
            type: "wordCloud",
            shape: "circle",
            keepAspect: false,
            left: "center",
            top: "center",
            width: "100%",
            height: "100%",
            right: null,
            bottom: null,
            sizeRange: [12, 60],
            rotationRange: [-90, 90],
            rotationStep: 45,
            gridSize: 8,
            drawOutOfBound: false,
            layoutAnimation: true,
            textStyle: {
              fontFamily: "sans-serif",
              fontWeight: "bold",
              color: function () {
                return (
                  "rgb(" +
                  [
                    Math.round(Math.random() * 250 + 100),
                    Math.round(Math.random() * 250 + 100),
                    Math.round(Math.random() * 250 + 100),
                  ].join(",") +
                  ")"
                );
              },
            },
            emphasis: {
              focus: "self",
              textStyle: {
                textShadowBlur: 2,
                textShadowColor: "#fff",
              },
            },
            data: staticData,
          },
        ],
      });
      // 监听窗口大小变化，重新调整ECharts实例的大小
      window.addEventListener("resize", () => {
        mychart.resize();
      });
    };
    DrawWordCloud();
  }
};
getRecruit();


</script>

<style scoped lang="scss">
#charts-contents {
  width: 100%;
  height: 100%;
}
</style>